import React, { PureComponent } from 'react';
import { Input } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import './index.scss';

export default class Paragraph extends PureComponent {
  state = {
    isEdit: false,
  };

  handleClick = () => {
    this.setState({
      isEdit: true,
    });
  };

  handleInputEnter = (e) => {
    this.setState({
      isEdit: false,
    });
    const { onOk } = this.props;
    onOk && onOk(e.target.value);
  };

  render() {
    const { isEdit } = this.state;
    return !isEdit ? (
      <div className="codeup-component-paragraph">
        <span className="codeup-component-paragraph-text">{this.props.children}</span>
        <YunxiaoIcon
          className="codeup-component-paragraph-icon"
          type="edit-line"
          onClick={this.handleClick}
        />
      </div>
    ) : (
      <div className="codeup-component-paragraph">
        <Input defaultValue={this.props.children} autoFocus onPressEnter={this.handleInputEnter} />
      </div>
    );
  }
}
